<template>
	<NavBarVue :title="'优惠劵'" />
	<view class="discount">
		<view class="head-nav">
			<view class="navList" :class="item.id === couponStatus ? 'activite' : ''" v-for="(item) in couponGroupData" :key="item.id"
				@click="checkIndex(item.id)">
				{{item.text}}
				<div class="zontal" :class="item.id === couponStatus ? 'pink' : ''"></div>
			</view>
		</view>
		<!-- 内容切换 -->
		<view class="content">
			<template v-for="item in couponUserList" :key="item.id">
				<CouponVue :coupon="item" :isCouponStatus="couponStatus" @toUse="toUse(item.userId, item.couponCode,  item.status)" />
			</template>
		</view>
	</view>
	<TabBarVue />
</template>

<script setup>
	import CouponVue from '../../../components/Coupon.vue'
	import {
		onMounted,
		ref,
		reactive,
		computed
	} from "vue"
	import {
		useUserReceive
	} from '../../../store'
	const userReceive = useUserReceive()

	// 优惠劵分组切换
	const couponGroupData = reactive([{
			id: 0,
			text: "待使用"
		},
		{
			id: 1,
			text: "已使用"
		},
		{
			id: 2,
			text: "已过期"
		}
	])
	// 优惠劵状态; 获取用户优惠劵列表
	const couponStatus = ref(0)
	const checkIndex = async (index) => {
		couponStatus.value = index
		await getCouponList()
	}
	onMounted(() => {
		getCouponList()
	})
	// 获取用户优惠劵列表
	const getCouponList = async () => {
		await userReceive.userReceiveList({
			pageNo: 1,
			pageSize: 10,
			status: couponStatus.value
		})
	}
	const couponUserList = computed(() => {
		return userReceive.userReceiveListData.objects || []
	})
	// 去使用
	const toUse = (userId, couponCode, status) => {
		if(status === 2) {
			return
		}
		uni.navigateTo({
			url: `/pages/tab-mine/drawer/usage-details?userId=${userId}&couponCode=${couponCode}&status=${status}`
		})
	}
</script>

<style lang="scss" scoped>
	.discount {
		width: 100%;
		font-family: PingFangSC, PingFang SC;
		background-color: rgb(244, 244, 244);
		padding-bottom: 70px;
		.top {
			margin-top: 30rpx;
			display: flex;
			background: white;
			height: 100rpx;
			line-height: 100rpx;
			.you {
				border-radius: 20rpx;
				border: 1rpx solid whitesmoke;
			}
		}

		.head-nav {
			display: flex;
			align-items: center;
			position: sticky;
			/* #ifdef MP-WEIXIN */
			top: 170rpx;
			/* #endif */
			/* #ifdef H5 */
			top: 0rpx;
			/* #endif */
			font-size: 32rpx;
			height: 88rpx;
			width: 100%;
			background-color: white;
			z-index: 999;
			.navList {
				margin-left: 36rpx;
				position: relative;
			}

			.activite {
				;
				font-weight: bold;
			}

			.pink {
				background-color: #FE5067 !important;
			}

			.zontal {
				height: 4rpx;
				width: 40rpx;
				background-color: white;
				position: absolute;
				bottom: -12rpx;
				left: calc(50% - 20rpx);
			}
		}

		.content {
			padding: 0rpx 33rpx;
		}




	}


	.icon {
		margin-top: 20rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;

		width: 100%;
		height: 155rpx;
		margin-right: 6rpx;
		position: relative;

		.itn {
			position: absolute;
			right: 0rpx;
			height: 60rpx;
			width: 150rpx;

			border: 0rpx solid;
			background-color: white;
			text-align: center;
			color: #FE5067;

			border-radius: 30rpx;
			line-height: 60rpx;
			top: calc(78rpx - 30rpx);
			right: 30rpx;
		}
	}
</style>